<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="(item,index) in arr" :key="item.id" >
        <div>{{index}}</div>
        <div class="top"><span>{{item.name}}</span><span>{{item.date}}</span></div>
        <div class="content">{{item.content}}</div>
      </li>
    </ul>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        arr: [
          {
            id: 1,
            name: 'lisi',
            date: '2023/2/3',
            content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit'
          },
          {
            id: 2,
            name: 'wangwu',
            date: '2023/1/3',
            content: 'ur adipisicing elit. Odio sed eos esse quod. Quod animi id adipisci. Pariatur natus laborum quasi veniam? Maiores eos assumenda doloremque consectetur ducimus maxime excepturi?Lorem ipsum dolor sit amet consectetur adipisicing elit'
          },
        ]
      },
      methods: {

      }
    })
  </script>
</body>
</html>